---
title: Community-Inhalte
description: Entdecke von der Community erstellte Anleitungen, Artikel und Videos, die dir helfen, Starlight zu erlernen und zu bauen!
---

:::tip[Füge dein eigenes hinzu!]
Hast du Inhalte über Starlight produziert?
Eröffne eine PR und füge einen Link zu dieser Seite hinzu!
:::

import { CardGrid, LinkCard } from '@astrojs/starlight/components';

## Artikel und Rezensionen

Hier findest du eine Sammlung von Beiträgen und Artikeln, in denen du mehr über Starlight und die Erfahrungen anderer Menschen erfährst:

<CardGrid>
	<LinkCard
		href="https://devm.io/open-source/starlight-astro"
		title="Statische Website-Erstellung mit Starlight"
		description="“Bei der Entwicklung von Komponenten ist keine Idee zu groß oder zu klein“ - ein Interview mit Chris Swithinbank, Starlight Leiter"
	/>
	<LinkCard
		href="https://frontendatscale.com/blog/hybrid-frontend-architecture/"
		title="Hybride Frontend-Architektur mit Astro und Starlight"
		description="Maxi Ferreira und Ben Holmes bauen eine Dokumentationswebsite mit Starlight, TinaCMS und einem interaktiven API Playground mit Authentifizierung."
	/>
	<LinkCard
		href="https://www.olets.dev/posts/comparing-docs-site-builders-vuepress-vs-starlight/"
		title="Vergleich von Dokumentations&shy;websites-Frameworks: VuePress vs. Starlight"
		description="Wie schneiden diese beiden Frameworks ab?"
	/>
	<LinkCard
		href="https://astro.build/case-studies/wp-engine/"
		title="Fallstudie: Senkung der Entwicklungskosten"
		description="Wie WP Engine mit Astro's Starlight die Entwicklungskosten um über 50% senken konnte."
	/>
	<LinkCard
		href="https://maciekpalmowski.dev/blog/building-a-documentation-site-using-astro-starlight/"
		title="Aufbau einer Dokumentationswebsite mit Astro Starlight"
		description="Maciek Palmowski beschreibt, wie Patchstack seine Dokumentation zu Starlight migriert hat"
	/>
	<LinkCard
		href="https://blog.cloudflare.com/open-source-all-the-way-down-upgrading-our-developer-documentation/"
		title="Open Source von Anfang bis Ende"
		description="Wie Cloudflare Starlight benutzt hat, um seine Entwickler&shy;dokumentation zu verbessern."
	/>
	<LinkCard
		href="https://starlight-changelog.netlify.app/"
		title="Starlight Changelog"
		description="Sieh dir alle Veröffentlichungen des @astrojs/starlight-Pakets auf einer einzigen schönen Website an."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/contributing-to-starlight"
		title="Zu Starlight beitragen"
		description="Meine Erfahrungen und Tipps, wie man bei Open-Source-Projekten wie Starlight mitmachen kann."
	/>
</CardGrid>

## Beispiele und Leitfäden

Beispiele sind in der Regel kurze, konzentrierte Anleitungen, die den Leser durch ein funktionierendes Beispiel für eine bestimmte Aufgabe führen. Beispiele sind eine gute Möglichkeit, deinem Starlight-Projekt neue Funktionen oder Verhaltensweisen hinzuzufügen, indem du Schritt-für-Schritt-Anweisungen befolgst! Andere Anleitungen erklären Konzepte, die sich auf einen bestimmten Inhaltsbereich beziehen, z.&nbsp;B. die Verwendung von Bildern oder das Arbeiten mit MDX.

Erkunde die von der Community erstellten Inhalte, die von Starlight-Benutzern gepflegt werden:

<CardGrid>
	<LinkCard
		href="https://www.webpro.nl/scraps/versioned-docs-with-starlight-and-vercel"
		title="Versionierte Dokumentation mit Starlight & Vercel"
		description="Ein Leitfaden für die Implementierung separater Versionen der Dokumentation für jede Hauptversion eines Projekts."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-heading-links"
		title="Links zu Starlight Überschriften hinzufügen"
		description="Eine Anleitung zur Verwendung eines Rehype-Plugins, um Links zu bestimmten Abschnitten deiner Dokumentation zu teilen."
	/>
	<LinkCard
		href="https://blog.otterlord.dev/posts/starlight-sponsors/"
		title="Füge Sponsoren zu deiner Starlight-Website hinzu"
		description="Eine Anleitung zur Implementierung einer benutzerdefinierten Sponsorenkomponente in deiner Dokumentations-Seitenleiste."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-og-images"
		title="Open Graph Bilder zu Starlight hinzufügen"
		description="Ein Leitfaden zur Erstellung von sozialen Bildern und den entsprechenden Meta-Tags für deine Website."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-third-party-icon-sets"
		title="Symbol-Sets von Drittanbietern in Starlight verwenden"
		description="Eine Anleitung zur Verwendung von unplugin-icons, um die Auswahl an verfügbaren Symbolen für Starlight zu erweitern."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-custom-html-head"
		title="Bearbeite den HTML-Kopf von Starlight-Websites"
		description="Lerne, wie du gängige Kopfinhalte wie Webanalysen, Schriftarten und Skripte hinzufügen kannst."
	/>
	<LinkCard
		href="https://dev.to/mrrobot/publishing-documentation-with-astro-starlight-691"
		title="Dokumentation mit Astro Starlight veröffentlichen"
		description="Erste Schritte mit der Starlight-Dokumentation."
	/>
	<LinkCard
		href="https://events-3bg.pages.dev/jotter/starlight/guide/"
		title="Aktiviere Ansichtsübergänge"
		description="Hol dir das SPA-ähnliche Aussehen und Gefühl mit der Unterstützung der Ansichtsübergänge aus dem Bag of Tricks."
	/>
	<LinkCard
		href="https://jamcomments.com/posts/structured-data-with-starlight"
		title="Hinzufügen von strukturierten Daten zu Starlight-Websites"
		description="Lerne, wie du dynamische JSON-LD strukturierte Daten für deine Dokumentations&shy;websites erstellst."
	/>
	<LinkCard
		href="https://starlight-examples.netlify.app/"
		title="Starlight Beispiele"
		description="Eine Sammlung von StackBlitz-Einbettungen, die zeigen, wie man in Starlight-Dokumentations&shy;websites praktische Dinge tun kann."
	/>
	<LinkCard
		href="https://hideoo.dev/notebooks/starlight-plugins-by-example"
		title="Starlight-Plugins anhand von Beispielen"
		description="Eine Sammlung von Notizen und Beispielen zu Starlight-Plugins und gängigen Mustern, die zum Erstellen dieser Plugins verwendet werden."
	/>
	<LinkCard
		href="https://blog.trueberryless.org/blog/starlight-progress-indicator/"
		title="Lesefortschrittsanzeige hinzufügen"
		description="Erfahre, wie du eine horizontale Lesefortschrittsanzeige zu deiner Starlight-Website hinzufügen kannst."
	/>
	<LinkCard
		href="https://blog.trueberryless.org/blog/starlight-sidebar-whitespace/"
		title="Verwende eigene Stile für deine Starlight-Seitenleiste"
		description="Mit ein bisschen CSS kannst du Schriftarten, Farben und mehr in der Starlight-Seitenleiste anpassen."
	/>
	<LinkCard
		href="https://blog.trueberryless.org/blog/starlight-dropdown-and-list-together/"
		title="Starlight-Themen Dropdown auf Mobilgeräten, Liste auf Desktop-Computern"
		description="Kombiniere zwei Plugins, um das Beste aus beiden auf Desktop- und Mobilgeräten zu erhalten."
	/>
	<LinkCard
		href="https://blog.trueberryless.org/blog/starlight-autogenerate-whole-sidebar/"
		title="Verarbeitung von Starlight-Seitenleisten mit Middleware"
		description="Benutze Route-Middleware, um die Reihenfolge der Seitenleisten und Gruppenbeschriftungen zu steuern, inspiriert von den Konventionen von Nuxt Content."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-custom-social-links"
		title="Füge soziale Links mit benutzerdefinierten Symbolen zu Starlight hinzu"
		description="Hier erfährst du, wie du eigene Symbole für Social-Media-Links im Header der Starlight-Website verwenden kannst."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-paste-images-with-visual-studio-code"
		title="Bilder mit Visual Studio Code in Starlight-Seiten einfügen"
		description="Verbessere deinen Starlight-Dokumentations-Workflow, indem du Bilder mit Visual Studio Code in deine Dokumentationsseiten einfügst."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-add-diagrams-using-d2"
		title="Füge Diagramme mit D2 zu deiner Starlight-Dokumentation hinzu"
		description="Lerne, wie du mit D2 Diagramme zu deiner Starlight-Dokumentation hinzufügen kannst."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-og-images-cloudinary-astro-sdk"
		title="Erstelle Open-Graph-Bilder für Starlight mit dem Cloudinary Astro SDK."
		description="Lerne, wie du mit dem Cloudinary Astro SDK Open-Graph-Bilder für deine Starlight-Dokumentationswebsite machst."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-list-recent-github-releases"
		title="Zeig die neuesten GitHub-Veröffentlichungen in Starlight mit der Astro Content Layer API an."
		description="Lerne, wie du die Astro Content Layer API nutzen kannst, um die neuesten GitHub-Veröffentlichungen in einem Starlight-Projekt aufzulisten."
	/>
	<LinkCard
		href="https://hideoo.dev/notes/starlight-sitewide-banner"
		title="Füge ein siteweites Banner zu Starlight hinzu"
		description="Lerne, wie du mit der integrierten Bannerfunktion von Starlight ein siteweites Banner erstellen kannst."
	/>
</CardGrid>

## Video-Inhalte

Entdecke Videos und Kanäle mit Starlight-Inhalten, darunter Live-Streams und Bildungsinhalte.

import YouTubeGrid from '~/components/youtube-grid.astro';

### Official-Videos

<YouTubeGrid
	videos={[
		{
			href: 'https://www.youtube.com/watch?v=5u0Ds7wzUeI',
			title: 'Starlight von Astro',
			description: 'Sieh dir das offizielle Starlight-Startvideo an',
		},
		{
			href: 'https://www.youtube.com/watch?v=j8K-ESJF814',
			title: 'Ein Jahr Starlight!',
			description:
				'Sarah redet über Astros von der Community erstelltes Dokumentationstheme',
		},
	]}
/>

### Community Videos und Streams

<YouTubeGrid
	videos={[
		{
			href: 'https://www.youtube.com/shorts/zjOWezSzd18',
			title: '🌟 SUB 1 MINUTE RUN',
			description:
				'Sieh dir an, wie Ben eine neue Starlight-Website in weniger als einer Minute startet!',
		},
		{
			href: 'https://www.youtube.com/watch?v=sF6UcV3moZg',
			title: 'Dokumentation mit Starlight und Astro erstellen',
			description:
				'Schau dir an, wie Chris und Alex mit CodingCat.dev in den Code von Starlight eintauchen',
		},
		{
			href: 'https://www.youtube.com/watch?v=sWkkHbwDeQc',
			title: 'Astro Starlight',
			description: 'Einführung in Starlight in weniger als einer Minute.',
		},
		{
			href: 'https://www.youtube.com/watch?v=-Ki-1E5gNCk',
			title:
				'Astro Starlight Dokumentations&shy;vorlage (Erstelle eigene Applikations-Dokumentation!)',
			description:
				'Eine neue Starlight-Website ist in etwa 5 Minuten einsatzbereit',
		},
		{
			href: 'https://www.youtube.com/watch?v=12o7WxjAxjM',
			title:
				'Starlight-Dokumentation in ein Next.js-Projekt mit Proxys einbinden',
			description:
				'Starlight als Unterverzeichnis-Projekt innerhalb einer Next.js-Website einrichten',
		},
		{
			href: 'https://www.youtube.com/watch?v=5pq80drDrNs',
			title:
				'Mit diesem tollen Tool habe ich Shadcns Dokumentation in 30 Minuten neu erstellt',
			description:
				'In diesem Video erkläre ich dir, was Starlight so cool macht und warum du es vielleicht bei deinem nächsten Projekt ausprobieren solltest.',
		},
		{
			href: 'https://www.youtube.com/watch?v=Q1E4Gkt63ko',
			title: 'Astro Starlight und Emoji-Blast mit Chris Swithinbank',
			description:
				'Chris, der Schöpfer von Astros Starlight-Framework, zeigt mir, wie ich es für eine neue Emoji-Website einrichte. 🌟 🎇',
		},
	]}
/>
